<template>
  <div class='my'>
    <div class="userinfo">
      <van-cell class="user_col">
        <template #title>
          <div class="top">
            <div>{{ obj?.nick_name }}</div>
            <van-button v-if="obj?.is_sales==1" class="member" type="info" size="mini" round color="linear-gradient(to right, #F3EFE0, #FEE092)" :icon="require('@/assets/img/store/crown.png')">团长</van-button>
            <van-badge :content="countnotice" max="99">
              <van-button class="message" type="info" size="mini" @click="jumpToMessage" :icon="require('@/assets/img/my/message.png')">消息通知</van-button>
            </van-badge>

          </div>

          <div class="time" v-if="obj.invite_name">我的上级：{{obj.invite_name}}</div>

          <div class="time">注册时间:{{ add_time }}</div>
        </template>
        <template #icon>
          <van-image class="avatar" :src="obj.avatar.indexOf('http') != -1 ? `${obj.avatar}` : `${resourceURL}${obj.avatar}`" fit="cover" round />
        </template>
        <!-- <template #label>
          <van-button class="member" type="info" size="mini" round color="linear-gradient(to right, #F3EFE0, #FEE092)">团长</van-button>
        </template> -->
        <!-- <template #default>

          

        </template> -->
      </van-cell>
    </div>

    <van-cell-group class="inset integral" inset :border="false">
      <van-cell title="每日签到可获取积分兑换商品" :label="`个人积分：${obj?.growth_coin}`" :border="false" center>
        <template #default>
          <van-button type="primary" @click="jumpToSign">去签到</van-button>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="inset commonly" inset :border="false">
      <van-grid :column-num="3" :border="false">
        <van-grid-item v-for="(item, index) in promotion" :key="index" :to="{ name: item.route, query: { type: item.type } }" @click="setOrderTab(item.query)">
          <van-icon :name="item.icon" class="icon" />
          <div class="text">{{ item.text }}</div>
          <div class="red"> {{ item.accumulation }}</div>
        </van-grid-item>
      </van-grid>

    </van-cell-group>
    <van-cell-group class="inset commonly" inset :border="false">
      <van-cell title="我的订单" value="查看全部" :border="false" center is-link :to="{ name: 'order' }" @click="setOrderTab(null)" />
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="(item, index) in orders" :key="index" :icon="item.icon" :text="item.text" :to="{ name: item.route, query: { shop_id: 0 } }" @click="setOrderTab(item.query)" :class="[index == 3 ? 'scale' : '']" :badge="orderNum.order[index] || ''" />
      </van-grid>
    </van-cell-group>
    <van-cell-group class="inset commonly" inset :border="false">
      <van-cell title="服务订单" value="查看全部" :border="false" center is-link :to="{ name: 'HousekeepingOrder' }" @click="setOrderTab(null)" />
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="(item, index) in HousekeepingOrder" :key="index" :icon="item.icon" :text="item.text" :to="{ name: item.route, query: { sign: item.query } }" :class="[index == 3 ? 'scale' : '']" :badge="orderNum.service[index] || ''" />
      </van-grid>
    </van-cell-group>
    <van-cell-group class="inset commonly" inset :border="false">
      <van-cell title="常用功能" :border="false" center />
      <van-grid :column-num="4" :border="false">
        <van-grid-item v-for="(item, index) in commonly" :key="index" :icon="item.icon" :text="item.text" @click="goRoute(item)" />
      </van-grid>
    </van-cell-group>

  </div>
</template>

<script>

export default {
  data () {
    return {
      add_time: "",
      obj: this.$store.state.userInfo,
      orderNum: [],
      countnotice: 0,
      promotion: [
        { icon: require('@/assets/img/my/Maker.png'), text: '我的创客', accumulation: `${this.$store.state.userInfo?.invite_count}人`, route: 'promotion', type: '1' },
        { icon: require('@/assets/img/my/accumulate.png'), text: '累计奖励', accumulation: `￥${this.$store.state.userInfo?.accumulation}`, route: 'accumulate' },
        { icon: require('@/assets/img/my/promotion.png'), text: '推广订单', accumulation: `${this.$store.state.userInfo?.order_count}单`, route: 'promotion', type: '2' },
      ],
      orders: [
        { icon: require('@/assets/img/my/order_wait_pay.png'), text: '待付款', route: 'order', query: '1' },
        { icon: require('@/assets/img/my/order_wait_receiving.png'), text: '待收货', route: 'order', query: '3' },
        { icon: require('@/assets/img/my/order_wait_evaluation.png'), text: '待评价', route: 'order', query: '4' },
        { icon: require('@/assets/img/my/order_after_sales.png'), text: '售后', route: 'order', query: '5' },
      ],
      HousekeepingOrder: [
        { icon: require('@/assets/img/my/clockIcon.png'), text: '预约订单', route: 'HousekeepingOrder', query: 0 },
        { icon: require('@/assets/img/my/Housekeeping.png'), text: '已完成订单', route: 'HousekeepingOrder', query: 1 },

      ],
      commonly: [
        { icon: require('@/assets/img/my/apply_for_store.png'), text: '申请加盟', route: 'applyShop' },
        { icon: require('@/assets/img/my/coupon.png'), text: '消费券', route: 'myCoupon' },
        { icon: require('@/assets/img/my/exchange.png'), text: '兑换商品', route: 'ExchangeGoods' },
        { icon: require('@/assets/img/my/footprint.png'), text: '我的足迹', route: 'footprint' },
        { icon: require('@/assets/img/my/collection.png'), text: '商品收藏', route: 'collection' },
        { icon: require('@/assets/img/my/address.png'), text: '地址管理', route: 'address' },
        { icon: require('@/assets/img/my/Feedback.png'), text: '意见反馈', route: 'Feedback' },
        { icon: require('@/assets/img/my/examQuestion.png'), text: '问卷调查', route: 'exam' },
        { icon: require('@/assets/img/my/teamLeader.png'), text: '成为团长', route: 'teamLeader' },
        { icon: require('@/assets/img/my/setting.png'), text: '设置', route: 'setUp' },

        { icon: require('@/assets/img/my/myPromotion.png'), text: '我要推广', route: 'invite' },


      ],
    }
  },
  created () {
    this.$store.dispatch('getUserInfo')
    this.countorder()
    const arr = ['accumulation', 'invite_count', 'order_count']
    arr.forEach((ele) => {
      console.log(this.obj[ele]);
    })
    this.add_time = this.$moment(Number(this.obj.add_time) * 1000).format('YYYY/MM/DD HH:mm:ss')
    console.log(this.obj);
  },
  methods: {
    setOrderTab (query) {
      this.$store.commit('setOrderTab', query);
    },
    //常用功能跳转
    goRoute (e) {
      if (e.route == 'chat') {
        this.$router.push({ name: e.route, query: { shop_id: e.query } })
      } else {
        this.$router.push({ name: e.route, query: { id: e.query } })
      }
    },

    //跳转
    jumpToSign () {
      this.$router.push({
        name: 'signIn',

      })
    },
    //获取各状态订单个数
    countorder () {
      //如果没有code 去获取code

      this.$axios
        .get(this.$api.countorder)
        .then((res) => {
          if (res.data.code == 1) {

            this.orderNum = res.data.data
          }
        });
      this.$axios
        .get(this.$api.countnotice)
        .then((res) => {
          if (res.data.code == 1) {
            if (Number(res.data.data)) {
              this.countnotice = Number(res.data.data)
            } else {
              this.countnotice = ''
            }

          }
        });

    },
    //跳转家政订单
    jumpToHouseOrder (e) {

      this.$router.push({ name: e.route, query: { sign: e.query } })
    },
    //消息通知列表
    jumpToMessage () {
      this.$router.push({
        name: 'message',

      })
    },

  },
}
</script>

<style scoped lang='less'>
.scale {
  /deep/ img {
    transform: scale(1.1);
  }
}

.van-badge__wrapper {
  position: absolute;
  top: 8px;
  right: 8px;
}

.my {
  .userinfo {
    height: 165px;
    background: url('../../assets/img/my/bg.png') no-repeat;
    background-position: 100% 100%;
    background-size: cover;
    padding: 24px 16px 0;
    box-sizing: border-box;

    .user_col {
      padding: 0;
      background-color: transparent;
      align-items: center;

      .time {
        font-size: 12px;
      }

      .top {
        display: flex;
        margin-bottom: 7px;

        div:nth-child(1) {
          margin-right: 5px;
        }

        .message {
          padding: 5px 8px;
          border-radius: 8px;
          background-color: rgba(255, 255, 255, 0.4);
          border-color: transparent;

          /deep/.van-button__text {
            color: #fff;
            font-size: 12px;
            font-weight: 400;
          }
        }
      }

      /deep/.van-cell__title {
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        margin-left: 12px;
        margin-top: 12px;
      }

      /deep/.avatar {
        width: 60px;
        height: 60px;
      }

      .member {
        padding: 0 10px;

        /deep/.van-button__text {
          color: #ac7912;
          font-weight: 400;
        }
      }
    }
  }

  .integral {
    margin-top: -35px;

    /deep/.van-cell__title {
      flex: 2;
      color: #b9b9b9;
      font-size: 12px;

      span {
        color: #e24546;
        font-size: 14px;
        font-weight: bold;
      }
    }

    /deep/.van-button {
      width: 58px;
      height: 26px;
      border-radius: 6px;
      padding: 0 16px;
      background: linear-gradient(138deg, #ff8143 0%, #ff5b31 100%);
      border-color: #ff8143;
    }

    /deep/.van-button__text {
      font-size: 14px;
      white-space: nowrap;
    }
  }

  .commonly {
    /deep/.van-grid-item__text {
      color: #000;
      font-size: 13px;
    }

    /deep/.van-cell__title {
      font-size: 14px;
      font-weight: bold;
    }
  }

  .inset {
    margin-bottom: 12px;
  }

  .icon {
    img {
      width: 29px;
      height: 29px;
    }
  }

  .text {
    font-size: 14px;
    margin: 4px 0px 2px 0px;
  }

  .red {
    color: red;
    font-weight: bold;
    font-size: 12px;
  }
}
</style>
